<template>
  <view class="order">
    <comHead :title="$t('index.dd')" :isLeft="true" :isRight="false"></comHead>
    <view class="time">
      <text>{{ $t("index.jysysj") }}：14:59</text>
      <view class="money">
        <image
          src="https://siha.vxmeng.com/static/index/shop/dou.png"
          mode="widthFix"
        ></image>
        <text>20</text>
      </view>
    </view>
    <text class="tit">{{ $t("index.zffs") }}</text>
    <view class="list">
      <view class="item">
        <text>{{ $t("index.sidouzf") }}</text>
        <view class="r">
          <text>{{ $t("index.zhye") }}：120{{ $t("index.sidou") }}</text>
          <image
            src="https://siha.vxmeng.com/static/index/radio.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
      <view class="item">
        <text>{{ $t("index.xjzf") }}</text>
        <view class="r">
          <text>{{ $t("index.sdbz") }}</text>
          <image
            src="https://siha.vxmeng.com/static/index/right.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
    <view class="btn">
      <text>{{ $t("index.qrdd") }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.order {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  .time {
    margin-top: 50rpx;

    > text {
      font-size: 24rpx;
      color: #767b82;
    }

    .money {
      font-size: 48rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: baseline;
      margin: 50rpx 0;

      image {
        width: 36rpx;
        margin-right: 20rpx;
      }
    }
  }

  .tit {
    font-size: 28rpx;
    color: #a2a2a2;
    padding: 0 30rpx;
    box-sizing: border-box;
    width: 100%;
    justify-content: flex-start;
  }

  .list {
    width: 690rpx;
    border-radius: 16rpx;
    padding: 0 0rpx;
    margin-top: 30rpx;
    box-sizing: border-box;
    background: linear-gradient(
      107deg,
      #222222 0%,
      rgba(30, 36, 44, 0.65) 100%
    );

    .item {
      display: flex;
      justify-content: space-between;
      border-bottom: 2rpx solid #292929;
      padding: 40rpx;

      &:last-child {
        border: none;
      }

      > text {
        font-size: 32rpx;
        color: #d8d8d8;
      }

      .r {
        font-size: 24rpx;
        color: #d8d8d8;
        display: flex;
        align-items: center;

        image {
          width: 32rpx;
          margin-left: 20rpx;
        }
      }
    }
  }

  .btn {
    width: 480rpx;
    height: 80rpx;
    border-radius: 60rpx;
    /* 渐变/渐变2 */
    background: linear-gradient(104deg, #00a6fe 20%, #854eff 85%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #fff;
    margin-top: 100rpx;
  }
}
</style>
